<template>
        <div class="ft-plant-upload-button">
          <Button type="ghost" icon="ios-cloud-upload-outline" @click="zh_uploadFile">选择文件</Button>
          <input type="file" ref="evfile" @change="zh_uploadFile_change" style="display:none">
        </div>
</template>
 
 
<script>
//七牛上传插件
import * as qiniu from 'qiniu-js';
 
export default {
  data(){
    return{
    }
  },
  methods: {
    //选择上传文件
    zh_uploadFile(){
      this.$refs.evfile.click();
    },
    //选择文件后触发的事件
    zh_uploadFile_change(evfile){
      //后端获取token
      getQiniuToken().then(res=>{
        var uptoken = res.data.data
        var file = evfile.target.files[0] //Blob 对象，上传的文件
        var key = file.name  // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
 
        let config = {
          useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: qiniu.region.z2     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };
 
        let putExtra = {
          fname: "",  //文件原文件名
          params: {}, //用来放置自定义变量
          mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        var observable = qiniu.upload(file, key, uptoken, putExtra, config);
        observable.subscribe({
          next: (result) => {
          // 主要用来展示进度
            console.log(result)
          },
          error: (errResult) => {
          // 失败报错信息
            console.log(errResult)
          },
          complete: (result) => {
          // 接收成功后返回的信息
            console.log(result)
          }
        })
      })
    },
  }
}
</script>